<template>
  <div id="screen">
    <div class="screen_body">
      <div class="search">
        <el-popover placement="bottom-start" width="150" trigger="click" :append-to-body="false">
          <div class="select_search_type">
            <div :class="{ 'select_search_type_item': true, 'selected_item': item.isSelected }"
              v-for="item in search_type_options " :key="item.value" @click="change_searchType(item)">
              {{ item.label }}
            </div>
          </div>
          <div slot="reference">
            <el-input :size="size" v-model="search_word" suffix-icon="el-icon-search" @change="change_search_word"
              placeholder="请输入订单号、渠道订单、房间号、姓名、手机号查询"></el-input>
          </div>
        </el-popover>
      </div>
      <div class="date">
        <span style="width: 25px; margin-right: 10px;">日期选择</span>
        <el-date-picker :append-to-body="false" :size="size" style="height: 32px;" @change="change_date"
          value-format="yyyy-MM-dd" v-model="date" type="daterange" align="right" unlink-panels start-placeholder="开始日期"
          end-placeholder="结束日期" :picker-options="pickerOptions" class="custom-date-picker">
        </el-date-picker>
      </div>
      <div class="channel">
        <span style="width: 25px; margin-right: 10px;">渠道</span>
        <el-select :size="size" v-model="ChannelValue" placeholder="请选择" @change="change_channel">
          <el-option v-for="item in channelOptions" :key="item.channel_id" :label="item.name" :value="item.channel_id"
            :disabled="item.disabled">
          </el-option>
        </el-select>
      </div>
      <div class="roomType">
        <span style="width: 25px; margin-right: 10px;">房型</span>
        <el-select :size="size" v-model="RoomTypelValue" placeholder="请选择" @change="change_RoomTypelValue">
          <el-option v-for="item in roomType" :key="item.id" :label="item.pms_title" :value="item.id"
            :disabled="item.disabled">
          </el-option>
        </el-select>
      </div>
      <div class="Type">
        <span style="width: 25px; margin-right: 10px;">入住类型</span>
        <el-select :size="size" v-model="TypeValue" placeholder="请选择" @change="change_TypelValue">
          <el-option v-for="item in Type" :key="item.value" :label="item.label" :value="item.value"
            :disabled="item.disabled">
          </el-option>
        </el-select>
      </div>
      <div class="state">
        <span style="width: 25px; margin-right: 10px;">入住状态</span>
        <el-select :size="size" v-model="stateValue" placeholder="请选择" @change="change_stateValue">
          <el-option v-for="item in state" :key="item.value" :label="item.label" :value="item.value"
            :disabled="item.disabled">
          </el-option>
        </el-select>
      </div>
      <div class="PayState">
        <span style="width: 25px; margin-right: 10px; margin-right: 10px;margin-right: 10px;">结账状态</span>
        <el-select :size="size" v-model="PayStateValue" placeholder="请选择" @change="change_PayState">
          <el-option v-for="item in PayState" :key="item.value" :label="item.label" :value="item.value"
            :disabled="item.disabled">
          </el-option>
        </el-select>
      </div>
      <div class="Reset">
        <el-button type="text" @click="reset" size="small">重置筛选</el-button>
      </div>
      <div class="ExportData">
        <el-button type="primary" size="small" @click="openExport">导出明细</el-button>
      </div>
    </div>

  </div>
</template>

<script>

export default {
  props: {
    overview: {
      type: String,
    },
  },
  watch: {
    overview(newValue) {
      // console.log(newValue, 'newValue');
      this.getListData['overview'] = newValue
    },
  },
  data() {
    return {
      hotel_id: sessionStorage.getItem('hotel_id'),

      search_type_options: [
        {
          label: '全部',
          value: null,
          isSelected: true,
        },
        {
          label: '订单号',
          value: 'order_no',
          isSelected: false,
        },
        {
          label: '房间号',
          value: 'room_num',
          isSelected: false,
        },
        {
          label: '客户名称',
          value: 'name',
          isSelected: false,
        },
        {
          label: '客户手机号',
          value: 'phone',
          isSelected: false,
        }, {
          label: '备注',
          value: 'remarks',
          isSelected: false,
        },
      ],
      channelOptions: [
        {
          channel_id: 0,
          name: '全部',
        },
        {
          channel_id: 1,
          name: '本地',
        },
        {
          channel_id: 2,
          name: '携程',
        },
        {
          channel_id: 3,
          name: '途家',
        },
        {
          channel_id: 4,
          name: 'Booking',
        },
        {
          channel_id: 5,
          name: '小红书',
        },],//渠道选择器
      PayState: [
        {
          value: 0,
          label: '全部'
        },
        {
          value: 1,
          label: '欠款'
        },
        {
          value: 2,
          label: '结清'
        },
        {
          value: 3,
          label: '多收'
        },
      ],//结账状态选择器
      state: [
        {
          value: null,
          label: '全部'
        },
        {
          value: 1,
          label: '已预订'
        },
        {
          value: 2,
          label: '已入住'
        },
        {
          value: 3,
          label: '已取消'
        },
        {
          value: 4,
          label: '已退房'
        }],//入住状态选择器
      roomType: [],//房型选择器
      Type: [{
        value: null,
        label: '全部'
      },
      {
        value: 0,
        label: '全日房'
      },
      {
        value: 1,
        label: '钟点房'
      },
      {
        value: 2,
        label: '免费房'
      },
      {
        value: 3,
        label: '自由房'
      },
      ],//入住类型，选择器


      search_type: undefined,//搜索类型
      search_word: undefined,//搜索词
      ChannelValue: undefined,//渠道
      PayStateValue: undefined,//结账状态
      stateValue: undefined,//入住状态
      RoomTypelValue: undefined,//入住房型
      TypeValue: undefined,//入住类型，
      date: undefined,//绑定的日期
      time_type: null,
      start_date: undefined,//开始日期
      end_date: undefined,//结束日期

      size: 'small',
      pickerOptions: {
        shortcuts: [{
          text: '入住时间',
          onClick: (picker) => {
            let shortcutNode = picker.$el.querySelectorAll('.el-picker-panel__shortcut')
            if (shortcutNode[0]) {
              shortcutNode[1].style.color = 'black';
              shortcutNode[2].style.color = 'black';
              shortcutNode[0].style.color = 'blue';
            }
            this.time_type = 'in_time'
            this.getListData.time_type = this.time_type
            if (this.getListData.start_date && this.getListData.end_date && this.getListData.time_type) {
              this.$emit("change_getData", this.getListData)

            }
          }
        }, {
          text: '离店时间',
          onClick: (picker) => {
            let shortcutNode = picker.$el.querySelectorAll('.el-picker-panel__shortcut')
            if (shortcutNode[0]) {
              shortcutNode[0].style.color = 'black';
              shortcutNode[2].style.color = 'black';
              shortcutNode[1].style.color = 'blue';
            }
            this.time_type = 'out_time'
            this.getListData.time_type = this.time_type
            if (this.getListData.start_date && this.getListData.end_date && this.getListData.time_type) {
              this.$emit("change_getData", this.getListData)
            }
          }
        }, {
          text: '创建时间',
          onClick: (picker) => {
            let shortcutNode = picker.$el.querySelectorAll('.el-picker-panel__shortcut')
            if (shortcutNode[0]) {
              shortcutNode[0].style.color = 'black';
              shortcutNode[1].style.color = 'black';
              shortcutNode[2].style.color = 'blue';
            }
            this.time_type = 'create_time'
            this.getListData.time_type = this.time_type
            if (this.getListData.start_date && this.getListData.end_date && this.getListData.time_type) {
              this.$emit("change_getData", this.getListData)
            }
          }
        }]
      },



      getListData: {
        hotel_id: sessionStorage.getItem('hotel_id'),
        page: 1,
        page_rows: 10,
        search_word: null,
        search_type: null,
        channel_id: null,
        checkout_status: null,
        room_status: null,
        room_id: null,
        start_date: null,
        end_date: null,
        time_type: null,
        is_hour_room: null,//0全日房，1钟点房，其它null
        overview: 'all',//all, 预离：leave，预抵：arrivals， 新办： new， 未排房：not_assign, 待处理： not_handel
      },
    }
  },
  created() {
    this.getAllRoom()
  },
  methods: {
    // 打开父组件导出明细抽屉组件
    openExport() {
      this.$emit('openExport')
    },
    /**
     * 重置筛选
     */
    reset() {
      this.search_type = undefined
      this.search_word = undefined
      this.ChannelValue = undefined
      this.PayStateValue = undefined
      this.stateValue = undefined
      this.RoomTypelValue = undefined
      this.TypeValue = undefined
      this.date = undefined
      this.start_date = undefined
      this.end_date = undefined
      this.$emit("reset")
    },
    /**
     * 改变搜索类型
     * @param {*} item 
     */
    change_searchType(item) {
      this.search_type_options.forEach(option => {
        option.isSelected = false//循环之前将所有样式都去掉
        if (option.label == item.label) {
          option.isSelected = true
          this.search_type = item.value
          if (item.label == '全部') {
            this.search_word = ''
          }
          this.getListData.search_type = this.search_type
          if (this.getListData.search_type && this.getListData.search_word) {
            this.$emit("change_getData", this.getListData)
          }
        }
      })
    },
    /**
     * 改变搜索词
     */
    change_search_word() {
      this.getListData.search_word = this.search_word
      if (this.getListData.search_type && this.getListData.search_word) {
        this.$emit("change_getData", this.getListData)
      }
    },
    /**
     * 改变渠道
     */
    change_channel(val) {
      this.getListData.channel_id = val
      this.$emit("change_getData", this.getListData)
    },
    /**
     * 改变日期
     */
    change_date(val) {
      this.start_date = val[0]
      this.end_date = val[1]
      this.getListData.start_date = this.start_date
      this.getListData.end_date = this.end_date
      // && this.getListData.time_type
      if (this.getListData.start_date && this.getListData.end_date) {
        this.$emit("change_getData", this.getListData)
      }
    },
    /**
     * 改变房型
     */
    change_RoomTypelValue(val) {
      this.getListData.room_id = val
      this.$emit("change_getData", this.getListData)
    },
    /**
     * 改变入住类型
     */
    change_TypelValue(val) {
      this.getListData.is_hour_room = val
      this.$emit("change_getData", this.getListData)
    },
    /**
     * 改变入住状态
     */
    change_stateValue(val) {
      this.getListData.room_status = val
      this.$emit("change_getData", this.getListData)
    },
    /**
     * 改变结账状态
     */
    change_PayState(val) {
      this.getListData.checkout_status = val
      this.$emit("change_getData", this.getListData)
    },

    // 获取所有房型
    getAllRoom() {
      let data = {
        hotel_id: this.hotel_id
      }
      this.my_request('supplier/hotel/room/pms', data, "GET").then(res => {
        let { code, data } = res.data
        console.log(data, '获取所有房型');

        if (200 == code) {
          data.unshift({
            id: null,
            pms_title: '全部'
          })
          this.roomType = data
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
// ::v-deep {
//   .el-picker-panel {
//     .el-picker-panel__shortcut {
//       color: red;
//     }
//   }
// }

.screen_body {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  position: relative;
  padding: 20px 16px;
  padding-bottom: 0px;
  font-size: 14px;

  .search {
    width: 480px;
  }

  .ExportData {
    margin-left: auto;
  }
}

.screen_body>div {
  margin-bottom: 20px;
  margin-right: 10px;
}

::v-deep {
  .el-popover {
    padding: 0%;
  }
}

.select_search_type {

  padding: 10px 0;

  .select_search_type_item {
    padding: 0 10px;
    line-height: 30px;
  }

  .selected_item {
    background-color: #F0F3FC;
    color: #5483DB;
  }
}
</style>